<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <th:block th:insert="common/common_header::header"></th:block>
</head>
<body>
<div id="app">
    <div class="container-box">
        <div style="width: 100%;padding: 10px 0px;">
            <el-row :gutter="20" style="width: 100%;">
                <el-col :span="5">
                    <el-input v-model="query.menuCode" size="small" placeholder="菜单编码" style="width: 200px" clearable></el-input>
                </el-col>
                <el-col :span="5">
                    <el-input v-model="query.menuName" size="small" placeholder="菜单名称" style="width: 200px" clearable></el-input>
                </el-col>
                <el-col :span="8">
                    <el-date-picker
                            v-model="query.createDate"
                            type="daterange"
                            size="small"
                            style="width: 300px"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            clearable>
                    </el-date-picker>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" size="small" @click="openAdd">新增</el-button>
                    <el-button type="primary" size="small" @click="handQuery">查询</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table
                :data="tableData"
                stripe
                max-height="430"
                border
                :cell-style="{padding:'2px'}"
                highlight-current-row
                header-cell-class-name="table-header"
                @current-change="handleCurrentRowChange"
                style="width: 100%"
                row-key="menuCode"
                lazy
                :load="load"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
            <el-table-column
                    prop="menuCode"
                    label="菜单编码"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="menuName"
                    label="菜单名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="iconCls"
                    label="图标"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    :formatter="statusFormatter">
            </el-table-column>
            <el-table-column
                    prop="pCode"
                    label="上级菜单">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="类型"
                    :formatter="typeFormatter">
            </el-table-column>
            <el-table-column
                    prop="url"
                    label="地址"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="authority"
                    label="权限"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="orderNo"
                    label="序号">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="180">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="openEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="page.pageSizes"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                    @prev-click="prevClick"
                    @next-click="nextClick"
            >
            </el-pagination>
        </div>
        <el-dialog title="新增" :visible.sync="dialogAddFormVisible" :width="formWidth">
            <el-form :model="addForm">
                <el-row :gutter="20" style="width: 100%;">
                    <el-col :span="12">
                        <el-form-item label="上级菜单" :label-width="formLabelWidth">
                            <el-input v-model="addForm.pCode" size="small" autocomplete="off" style="width: 200px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="类型" :label-width="formLabelWidth">
                            <el-select v-model="addForm.type" placeholder="请选择" size="small" @change="typeChange">
                                <el-option
                                        v-for="item in select.typeOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="width: 100%;">
                    <el-col :span="12">
                        <el-form-item label="菜单编码" :label-width="formLabelWidth">
                            <el-input v-model="addForm.menuCode" size="small" autocomplete="off" style="width: 200px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单名称" :label-width="formLabelWidth">
                            <el-input v-model="addForm.menuName" size="small" autocomplete="off" style="width: 200px"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="width: 100%;">
                    <el-col :span="12">
                        <el-form-item label="图标" :label-width="formLabelWidth">
                            <el-input v-model="addForm.iconCls" size="small" autocomplete="off" style="width: 200px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态" :label-width="formLabelWidth">
                            <el-select v-model="addForm.status" placeholder="请选择" size="small" >
                                <el-option
                                        v-for="item in select.statusOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="width: 100%;">
                    <el-col :span="12">
                        <el-form-item label="序号" :label-width="formLabelWidth">
                            <el-input v-model="addForm.orderNo" size="small" autocomplete="off" style="width: 200px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item v-if="addForm.type=='1'" label="地址" :label-width="formLabelWidth">
                            <el-input v-model="addForm.url" size="small" autocomplete="off" style="width: 200px"></el-input>
                        </el-form-item>
                        <el-form-item v-if="addForm.type=='2'" label="权限" :label-width="formLabelWidth">
                            <el-input v-model="addForm.authority" size="small" autocomplete="off" style="width: 200px"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogAddFormVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="saveAdd">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="编辑" :visible.sync="dialogEditFormVisible" :width="formWidth">
            <el-form :model="editForm">
                <el-input v-model="editForm.menuId" type="hidden"></el-input>
                <el-row :gutter="20" style="width: 100%;">
                    <el-col :span="12">
                        <el-form-item label="上级菜单" :label-width="formLabelWidth">
                            <el-input v-model="editForm.pCode" size="small" autocomplete="off" style="width: 200px" readOnly="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="类型" :label-width="formLabelWidth">
                            <el-select v-model="editForm.type" placeholder="请选择" size="small" @change="typeChange" disabled="true">
                                <el-option
                                        v-for="item in select.typeOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="width: 100%;">
                    <el-col :span="12">
                        <el-form-item label="菜单编码" :label-width="formLabelWidth">
                            <el-input v-model="editForm.menuCode" size="small" autocomplete="off" style="width: 200px"  readOnly="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单名称" :label-width="formLabelWidth">
                            <el-input v-model="editForm.menuName" size="small" autocomplete="off" style="width: 200px"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="width: 100%;">
                    <el-col :span="12">
                        <el-form-item label="图标" :label-width="formLabelWidth">
                            <el-input v-model="editForm.iconCls" size="small" autocomplete="off" style="width: 200px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态" :label-width="formLabelWidth">
                            <el-select v-model="editForm.status" placeholder="请选择" size="small" >
                                <el-option
                                        v-for="item in select.statusOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="width: 100%;">
                    <el-col :span="12">
                        <el-form-item label="序号" :label-width="formLabelWidth">
                            <el-input v-model="editForm.orderNo" size="small" autocomplete="off" style="width: 200px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item v-if="editForm.type=='1'" label="地址" :label-width="formLabelWidth">
                            <el-input v-model="editForm.url" size="small" autocomplete="off" style="width: 200px"></el-input>
                        </el-form-item>
                        <el-form-item v-if="editForm.type=='2'" label="权限" :label-width="formLabelWidth">
                            <el-input v-model="editForm.authority" size="small" autocomplete="off" style="width: 200px"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogEditFormVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="saveEdit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<th:block th:replace="common/common_footer::footer">
</th:block>
</body>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                query:{
                    menuCode:'',
                    menuName:'',
                    createDate:''
                },
                addForm: {
                    menuCode:'',
                    menuName:'',
                    iconCls:'',
                    status:'',
                    url:'',
                    pCode:'',
                    type:'0',
                    authority:'',
                    orderNo:null
                },
                editForm: {
                    menuId:'',
                    menuCode:'',
                    menuName:'',
                    iconCls:'',
                    status:'',
                    url:'',
                    pCode:'',
                    type:'',
                    authority:'',
                    orderNo:null
                },
                tableData:[],
                page:{
                    currentPage: 1,
                    pageSize: 10,
                    total: 0,
                    pageSizes:[10, 20, 30, 50]
                },
                dialogAddFormVisible: false,
                dialogEditFormVisible: false,
                urlShow:true,
                formLabelWidth: '120px',
                formWidth: '65%',
                select:{
                    statusOptions:[
                        {
                            label:"启用",
                            value:"1"
                        },{
                            label:"停用",
                            value:"0"
                        }
                    ],
                    typeOptions: [
                        {
                            label:"目录",
                            value:"0"
                        },{
                            label:"菜单",
                            value:"1"
                        },{
                            label:"按钮",
                            value:"2"
                        }
                    ]
                },
                tree: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        },
        components:{
        },
        created() {

        },
        methods: {
            handleSizeChange(val) {
                this.page.pageSize = val;
                this.page.currentPage = 1;
                this.queryData(this.page)
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.queryData(this.page)
            },
            prevClick(){
                this.page.currentPage = this.page.currentPage-1;
            },
            nextClick(){
                this.page.currentPage = this.page.currentPage+1;
            },
            load(tree, treeNode, resolve) {
                axios
                    .get(context+'menu/queryByPCode',{
                        params: {
                            pCode:tree.menuCode
                        }
                    })
                    .then(response => {
                        var arr = [];
                        if(response.data){
                            for(var i=0;i<response.data.length;i++){
                                var obj = response.data[i];
                                if(obj.type=="0"){
                                    obj.hasChildren = true;
                                }
                                arr.push(obj);
                            }
                        }
                        resolve(arr);
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            queryData(page){
                var params = {};
                if(this.query.createDate!=''&&this.query.createDate!=null&&this.query.createDate.length>0){
                    params.createTimeStart = this.query.createDate[0]+' 00:00:00';
                    params.createTimeEnd = this.query.createDate[1]+' 23:59:59';
                }
                params.menuCode = this.query.menuCode;
                params.menuName = this.query.menuName;
                params.pageNum = page.currentPage;
                params.pageSize = page.pageSize;
                console.log("params",params);

                axios.get(context+'menu/queryPage',{
                        params: params
                    }).then(response => {
                        var arr = [];
                        if(response.data && response.data.success){
                            for(var i=0;i<response.data.list.length;i++){
                                var obj = response.data.list[i];
                                if(obj.type=="0"){
                                    obj.hasChildren = true;
                                }
                                arr.push(obj);
                            }
                            this.tableData = arr;
                            this.page.total = response.data.total;
                        }
                    }).catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            handleCurrentRowChange(newCurrentRow,oldCurrentRow) {
                console.log(newCurrentRow);
                console.log(oldCurrentRow);
                this.currentRow = newCurrentRow;
            },
            handQuery(){
                this.queryData(this.page);
            },
            //打开新增
            openAdd(index, row) {
                this.addForm = {
                    type:"0",
                    status:"1"
                };
                this.dialogAddFormVisible = true;
            },
            saveAdd(){
                this.dialogAddFormVisible = false;
                var that = this;
                axios.post(context+'menu/insert',{
                    menuCode: this.addForm.menuCode,
                    menuName: this.addForm.menuName,
                    iconCls: this.addForm.iconCls,
                    status: this.addForm.status,
                    url: this.addForm.url,
                    pCode: this.addForm.pCode,
                    type: this.addForm.type,
                    orderNo: this.addForm.orderNo
                }).then(response => {
                    if(response.data && response.data.success){
                        this.$message({
                            showClose: true,
                            message: response.data.msg,
                            type: 'success'
                        });
                        this.queryData(this.page);
                    }else{
                        this.$message({
                            showClose: true,
                            message: response.data.msg,
                            type: 'error'
                        });
                    }
                }).catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            openEdit(index, row) {
                this.editForm = row;
                this.dialogEditFormVisible = true;
            },
            saveEdit() {
                this.dialogEditFormVisible = false;
                var that = this;
                axios.post(context+'menu/update',{
                    menuId: this.editForm.menuId,
                    menuCode: this.editForm.menuCode,
                    menuName: this.editForm.menuName,
                    iconCls: this.editForm.iconCls,
                    status: this.editForm.status,
                    url: this.editForm.url,
                    pCode: this.editForm.pCode,
                    type: this.editForm.type,
                    orderNo: this.editForm.orderNo
                }).then(response => {
                        if(response.data && response.data.success){
                            this.$message({
                                showClose: true,
                                message: response.data.msg,
                                type: 'success'
                            });
                            this.queryData(this.page);
                        }else{
                            this.$message({
                                showClose: true,
                                message: response.data.msg,
                                type: 'error'
                            });
                        }
                    }).catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            handleClick(row) {
            },
            typeChange(val){
                console.log(val);
                if("0"==val){
                    this.$set(this.addForm,'url','');
                    this.$set(this.editForm,'authority','');
                    this.$set(this.addForm,'url','');
                    this.$set(this.editForm,'authority','')
                }else if("1"==val){
                    this.$set(this.editForm,'authority','');
                    this.$set(this.editForm,'authority','');
                }else if("2"==val){
                    this.$set(this.addForm,'url','');
                    this.$set(this.addForm,'url','');
                }
            },
            handleDel(index, row){
                axios.get(context+'menu/deleteById',{
                        params: {
                            menuId: row.menuId,
                            pCode: row.menuCode
                        }
                    }).then(response => {
                        if(response.data && response.data.success){
                            this.$message({
                                showClose: true,
                                message: response.data.msg,
                                type: 'success'
                            });
                            this.queryData(this.page);
                        }else{
                            this.$message({
                                showClose: true,
                                message: response.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            typeFormatter(row, column, cellValue, index){
                if("0"==cellValue){
                    return "目录";
                }else if("1"==cellValue){
                    return "菜单";
                }else if("2"==cellValue){
                    return "按钮";
                }
            },
            statusFormatter(row, column, cellValue, index){
                if("1"==cellValue){
                    return "在用";
                }else{
                    return "停用";
                }
            },
        },
        mounted(){
            this.queryData(this.page);
        }
    })
</script>
</html>
